<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <img src="@/assets/imgs/flight/img.png" style="width:1130px;" />
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div style="text-align: left;">
          <el-select v-model="selected" placeholder="航班类型(国内/国际)" style="width:200px; margin-top:5px;">
            <el-option label="国内航班" value="2403"></el-option>
            <el-option label="国际航班" value="2401"></el-option>
          </el-select>
          <el-button type="primary" class="search-btn" @click="fetchData" style="margin-left:20px;">确认</el-button>
        </div>
      </el-col>
    </el-row>
    <div class="tableBar" style="margin-top:10px;">
      <el-input v-model="input1" placeholder="请输入始发站" disabled="disabled" style="width: 200px;">
        <i class="el-input__icon el-icon-search" style="cursor: pointer" @click="fetchData"></i>
      </el-input>
      <el-input v-model="input2" placeholder="请输入终点站" style="width: 200px; margin-left:10px;">
        <i class="el-input__icon el-icon-search" style="cursor: pointer" @click="fetchData"></i>
      </el-input>
      <el-date-picker v-model="orderTime" clearable value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange"
        placeholder="选择日期" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']" style="width: 400px; margin-left:10px;"></el-date-picker>
      <el-button type="primary" class="search-btn" @click="fetchData" style="margin-left:10px;">查询</el-button>
    </div>
    <el-table :data="tableData" stripe class="tableBox">
      <el-table-column prop="flid" label="航班ID" align="center"></el-table-column>
      <el-table-column prop="ffid" label="航班标识" align="center"></el-table-column>
      <el-table-column prop="cfno" label="航班号" align="center"></el-table-column>
      <el-table-column prop="startapcd" label="始发站" align="center"></el-table-column>
      <el-table-column prop="startfptt" label="预计起飞时间" align="center"></el-table-column>
      <el-table-column prop="endapcd" label="终点站" align="center"></el-table-column>
      <el-table-column prop="endfplt" label="预计到达日期" align="center"></el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template #default="scope">
          <el-button type="info" plain size="small" @click="editRow(scope.row)">变更</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination class="pageList" :page-sizes="[8, 16, 24, 32]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="total" :current-page.sync="currentPage"
      @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          &nbsp;
        </div>
      </el-col>
    </el-row>
    <el-row>
      <span style="font-size:20px;">游中国</span>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <img src="@/assets/imgs/flight/bottom3.png" style="width:1140px;" />
        </div>
      </el-col>
    </el-row>
    <br><br><br><br><br>
    
    <!-- 变更表单 -->
    <el-dialog v-model="showEditForm" style="margin-top: 20px;" v-if="showEditForm">
      <el-col :span="24">
        <el-form :model="editForm" label-width="120px">
          <el-form-item label="航班ID">
            <el-input v-model="editForm.flid" disabled></el-input>
          </el-form-item>
          <el-form-item label="航班标识">
            <el-input v-model="editForm.ffid"></el-input>
          </el-form-item>
          <el-form-item label="航班号">
            <el-input v-model="editForm.cfno"></el-input>
          </el-form-item>
          <el-form-item label="始发站">
            <el-input v-model="editForm.startapcd"></el-input>
          </el-form-item>
          <el-form-item label="预计起飞时间">
            <el-date-picker v-model="editForm.startfptt" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="终点站">
            <el-input v-model="editForm.endapcd"></el-input>
          </el-form-item>
          <el-form-item label="预计到达日期">
            <el-date-picker v-model="editForm.endfplt" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择时间"></el-date-picker>
          </el-form-item>
          <el-form-item label="变更原因">
            <el-input v-model="editForm.changereason"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveChanges">保存</el-button>
            <el-button @click="cancelEdit">取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import request from '@/utils/request';
import { ElMessageBox } from 'element-plus'; // 导入 ElMessageBox 组件
import { ElMessage } from 'element-plus';
const selected = ref('2403');
const input1 = ref('天津');
const input2 = ref('');
const orderTime = ref('');
const tableData = ref([]);
const total = ref(0);
const currentPage = ref(1);

const pageSize = ref(10);

const showEditForm = ref(false);
const editForm = ref({});


const fetchData = () => {
  request({
    url: '/fquery/outmain',
    method: 'GET',
    params: {
      page: currentPage.value,
      pageSize: pageSize.value,
      startapcd: input1.value, // 使用ref变量的值
      endapcd: input2.value,
      startfptt: orderTime.value ? orderTime.value[0] : '', // 处理日期范围
      endfplt: orderTime.value ? orderTime.value[1] : '',
      endapat: selected.value,
    }
  }).then(res => {
    if (res.data.errorCode == 200) {
      tableData.value = res.data.data.records; // 使用ref变量的值
      total.value = res.data.data.total; // 使用ref变量的值
    }
  }).catch(error => {
    console.error('Error fetching data:', error);
  });
};
const saveChanges = () => {
  request({
    url: '/apply/filghtchange',
    method: 'POST',
    data: editForm.value,  // 直接传递editForm
  }).then(res => {
    if (res.data.errorCode == 200) {
      ElMessage.success('变更成功');
      showEditForm.value = false;
      fetchData();
    } else {
      ElMessage.error('变更失败');
    }
  }).catch(error => {
    console.error('Error saving changes:', error);
    ElMessage.error('变更失败');
  });
};
const handleSizeChange = (val) => {
  pageSize.value = val; // 使用ref变量的值
  fetchData();
};

const handleCurrentChange = (val) => {
  currentPage.value = val; // 使用ref变量的值
  fetchData();
};

const addMemberHandle = (row) => {
  // 处理行数据的操作
};
const editRow = (row) => {
  editForm.value = { ...row }; // 使用对象展开运算符确保数据响应式更新
  showEditForm.value = true;
};
const cancelEdit = () => {
  showEditForm.value = false;
};
fetchData();
</script>

<style scoped>
.container {
  max-height: 100vh;
  overflow-y: auto;
}

.tableBar {
  display: flex;
  align-items: center;
  margin: 10px 0;
}
</style>
